<template>
  <div>
    <!-- 添加角色 -->
    <el-button type="primary" class="btn" @click="staffListShow = true">添加角色</el-button>
    <!-- /添加角色 -->
    <!-- 商品分类列表 -->
    <el-table :data="allStaffLists" border style="width: 100%">
      <el-table-column prop="id" :width="60" label="编号">
      </el-table-column>
      <el-table-column prop="name" label="角色列表">
      </el-table-column>
      <el-table-column prop="dec" label="角色描述">
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="showUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="delUserList(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /商品分类列表 -->

    <!-- 添加用户列表接口 -->
    <el-dialog title="添加角色" :visible.sync="staffListShow">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="角色名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="dec" :label-width="formLabelWidth">
          <el-input v-model="form.dec" autocomplete="off" placeholder="请输入角色描述"></el-input>
        </el-form-item>
      </el-form>
      <!-- 多选-->
      <div class="checkTit">权限设置</div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox :label="routeBox.name" v-for="routeBox in $store.state.perm.routes" :key="routeBox.name">
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="staffListShow = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- /添加用户列表接口 -->

    <!-- 编辑按钮添加用户列表接口 -->
    <el-dialog title="添加角色" :visible.sync="staffListShow2">
      <el-form :model="form2" :rules="rules" ref="form2">
        <el-form-item label="角色名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form2.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="dec" :label-width="formLabelWidth">
          <el-input v-model="form2.dec" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!-- 多选-->
      <div class="checkTit">权限设置</div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox :label="routeBox.name" v-for="routeBox in $store.state.perm.routes" :key="routeBox.name">
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="staffListShow2 = false">取 消</el-button>
        <el-button type="primary" @click="updateRoleList()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- /编辑按钮添加用户列表接口 -->
  </div>
</template>

<script>
import { getStaff, staffChange, deleteStaff } from '_api'
export default {
  name: 'roleList',
  data () {
    return {
      checkList: [],
      rules: {
        name: [
          {
            required: true,
            // 验证不通过时，错误提示文案
            message: '当前字段必填的'
          }
        ],
        dec: [
          {
            required: true,
            // 验证不通过时，错误提示文案
            message: '当前字段必填的'
          }
        ]
      },
      staffLists: [],
      allStaffLists: [],
      staffListShow: false,
      staffListShow2: false,
      form: {
        name: '',
        dec: ''
      },
      form2: {
        name: '',
        dec: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    // 弹出删除确认框
    delUserList (id) {
      this.$confirm('此操作将永久删除该用户，是否继续', '提示').then(() => {
        deleteStaff(id).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 1500,
              onClose: () => {
                this.getStaff()
              }
            })
          }
        })
      })
    },
    // 更新员工列表
    updateRoleList () {
      this.roleListShow2 = false
      this.$refs.form2.validate((valid) => {
        if (valid) {
          // 验证通过
          staffChange({ ...this.form2, route: this.checkList }).then(res => {
            if (res.data.code === 200) {
              //  console.log(res)
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 1500,
                onClose: () => {
                  this.$router.go(0)
                }
              })
            }
          })
        } else {
          // 验证不通过
          this.$message({
            type: 'error',
            message: '表单验证不通过'
          })
        }
      })
    },
    showUpdate (res) {
      console.log(res)
      this.staffListShow2 = true
      this.form2.name = res.name
      this.form2.dec = res.dec
    },
    onSubmit () {
      this.$refs.form.validate(valid => {
        console.log(valid)
        if (valid) {
          staffChange({ ...this.form, route: this.checkList }).then(res => {
            console.log(valid, 1111)
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '添加角色成功',
                duration: 1500,
                onClose: () => {
                  this.staffListShow = false
                  this.$router.go(0)
                }
              })
            }
          })
        }
      })
    },
    // 获取所有用户列表信息
    getStaff () {
      getStaff().then(res => {
        if (res.data.code === 200) {
          this.allStaffLists = res.data.data.list
        }
      })
    }
    // 请求所有的角色权限分类
  },
  created () {
    this.getStaff()
  }
}
</script>

<style lang="scss" scoped>
.el-checkbox-group {
  margin-left: 40px;

  .el-checkbox {
    width: 100px;
    margin-bottom: 5px;
  }
}

.checkTit {
  width: 108px;
  font-size: 14px;
  text-align: right;
  margin-bottom: 20px;
}

.btn {
  margin-bottom: 20px;
}
</style>
